<template>
	<view class="e-skeleton-block" :class="[is('animate', skeletonContext?.props?.animate)]" :style="[customStyle]">
		<slot></slot>
	</view>
</template>

<script lang="ts">
	import {defineComponent} from 'vue'
	export default defineComponent({
		name: "skeleton-block"
	});
</script>

<script lang="ts" setup>
	import {inject} from 'vue'
	import {
		skeletonContextKey
	} from '../../libs/tokens'
	import { useNamespace } from '../../libs/hooks';
	
	const props = withDefaults(defineProps<{
		customStyle?:Record<any,any>|string
	}>(),{
		
	})
	
	const { is } = useNamespace('skeleton-block');
	
	const skeletonContext = inject(skeletonContextKey)
	
	
	
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/skeleton-block.scss";
</style>
